<template>
  <div>
    <div class="header-btn">
      <div>查看文章</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 16px">
      <div class="con">
        <div class="view">
          <div class="view-con" v-if="obj.id">
            <p class="title">{{ obj.materialName }}</p>
            <p class="author"><span style="color: #082aff;">{{ obj.author }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
              dateFormat(obj.createTime)
            }}</p>
            <div class="content" v-html="obj.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { articleInfo } from '@/api/article/group'
import { dateFormat } from '@/utils'
//
export default {
  name: 'ArticleInfo',
  data() {
    return {
      obj: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    richImg(richText) {
      return richText.replace(
        /\<img/gi,
        "<img style='max-width:100%;height:auto;' "
      )
    },
    init() {
      articleInfo(this.$route.query.id || '').then(res => {
        if (res.code === 200) {
          const { data } = res
          data.content = this.richImg(data.content)
          this.obj = data
        }
      })
    },
    goBack() {
      if (+this.$route.query.is_person === 99) {
        this.$router.back(-1)
      } else {
        this.$router.push({
          name: 'Article',
          query: { is_person: this.$route.query.is_person }
        })
      }

    },
    dateFormat
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.con {
  background-color: #fff;
  border-radius: 3px;
  overflow: hidden;
  height: 706px;

  .view {

    // height: 900px;
    .view-con {
      position: relative;
      box-sizing: border-box;
      margin: 20px auto;
      width: 306px;
      height: 609px;
      // background-color: red;
      background-image: url('../../../assets/image/phone.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 9px;
      overflow: hidden;

      .title {
        line-height: 1.4;
        padding: 20px 20px 15px 20px;
        font-size: 18px;
      }

      .author {
        line-height: 2;
        font-size: 14px;
        color: #999;
        padding: 0 20px 15px 20px;
      }

      .content {
        padding: 0 15px 15px 15px;
        // height: 484px;
        // height: 450px;
        height: 425px;
        overflow-y: auto;
      }
    }
  }
}
</style>
